import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { compare } from '../../../utils/compare';
import services from '../../../services/api';

import { COLOR } from 'src/utils/color';
import { Input, Select, Row, Col, Form, Table } from 'antd';
import FormItem from '../../../components/FormItem';

const Option = Select.Option;

function OuterListCompare(props) {
  const [nameList, setNameList] = useState([]);
  useEffect(() => {
    getNameList(props.value.source);
  }, []);

  function getNameList(source) {
    services.outerList.getNameList({ source: source }).then(res => {
      if (res.code === 0) {
        setNameList(res.data);
      }
    });
  }

  function getColumns() {
    return [
      {
        title: '名单输入字段',
        key: 'param_name',
        dataIndex: 'param_name',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        }
      },
      {
        title: '字段Code',
        key: 'param_code',
        dataIndex: 'param_code',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        }
      },
      {
        title: '类型',
        key: 'param_data_type',
        dataIndex: 'param_data_type',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        }
      },
      {
        title: '长度',
        key: 'param_max_length',
        dataIndex: 'param_max_length',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        }
      },
      {
        title: '风控映射字段',
        key: 'field_name',
        dataIndex: 'field_name',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        }
      },
      {
        title: '字段Code',
        key: 'field_code',
        dataIndex: 'field_code',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        }
      },
      {
        title: '类型',
        key: 'field_data_type',
        dataIndex: 'field_data_type',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        }
      },
      {
        title: '所属渠道',
        key: 'app_name',
        dataIndex: 'app_name',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        }
      },
      {
        title: '关联事件',
        key: 'event_name',
        dataIndex: 'event_name',
        render: (text, record) => {
          const style = {};
          if (record.data_status === 1) {
            style.color = COLOR._BLUE;
          } else if (record.data_status === 3) {
            style.color = COLOR._RED;
          }
          return <span style={style}>{text}</span>;
        }
      }
    ];
  }

  const { source, third_list_config_id, remark, url, mapping_relation } = props.value;
  const formItems1 = [
    {
      label: {
        label: '名单',
        className: 'tantuer-form-item tantuer-form-item2'
      },
      name: 'source',
      options: {
        initialValue: source,
        rules: [{ required: true, message: '请填写名单名称' }]
      },
      component: (
        <Select placeholder='请选择' disabled style={{ ...compare(props, 'source') }}>
          {(props.third_namelist_source || []).map((item, index) => {
            return (
              <Option value={item.key} key={item.key}>
                {item.value}
              </Option>
            );
          })}
        </Select>
      )
    },
    {
      name: 'third_list_config_id',
      options: {
        initialValue: third_list_config_id,
        rules: [{ required: true, message: '请选择' }]
      },
      component: (
        <Select placeholder='请选择' disabled style={{ ...compare(props, 'third_list_config_id') }}>
          {nameList.map((item, index) => {
            return (
              <Option value={item.third_list_config_id} key={item.third_list_config_id}>
                {item.name}
              </Option>
            );
          })}
        </Select>
      )
    }
  ];
  const formItems2 = [
    {
      label: {
        label: '描述',
        className: 'tantuer-form-item tantuer-form-item2'
      },
      name: 'remark',
      options: {
        initialValue: remark,
        rules: [
          { max: 256, message: '最长256个字符' }
        ]
      },
      component: <Input placeholder='' disabled style={{ ...compare(props, 'remark') }} />
    },
    {
      label: {
        label: 'URL',
        className: 'tantuer-form-item tantuer-form-item2'
      },
      name: 'url',
      options: {
        initialValue: url,
        rules: [{ required: true, message: '请填写' }]
      },
      component: <Input placeholder='请填写' disabled style={{ ...compare(props, 'url') }} />
    }
  ];
  return (
    <div className='tantuer-form' style={{ paddingBottom: '20px' }}>
      <Form className='login-form'>
        <div style={{ marginTop: '20px' }}>
          <Row type='flex'>
            <Col span={12}>
              <Row type='flex'>
                {formItems1.map(item => {
                  return (
                    <Col span={12} key={item.name}>
                      <FormItem form={props.form} item={item} colNum={2} />
                    </Col>
                  );
                })}
              </Row>
            </Col>
            {formItems2.map(item => {
              return (
                <Col span={12} key={item.name}>
                  <FormItem form={props.form} item={item} colNum={2} />
                </Col>
              );
            })}
          </Row>
        </div>
      </Form>
      <Table
        columns={getColumns()}
        dataSource={mapping_relation}
        pagination={false}
        rowKey={record => {
          return (
            record.param_id +
            '.' +
            record.third_list_id +
            '.' +
            record.third_list_config_id +
            '.' +
            record.app_id +
            '.' +
            record.event_id +
            '.' +
            record.field_id
          );
        }}
      />
    </div>
  );
}

export default connect(mapStateToProps)(Form.create()(OuterListCompare));
function mapStateToProps(state) {
  return {
    third_namelist_source: state.code.third_namelist_source
  };
}
